<!DOCTYPE html>
<html>
<head>
<title>SpreadTable</title>
<link rel="stylesheet" type="text/css" href="jTable.css" />
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="jquery.tinysort.js" type="text/javascript"></script>
</head>
<body>

<div id="menu">
	<h1>SpreadTable</h1>
	<ul id="tabHeaders" onclick="menu.clickTab(event)">
		<li><a href="#">File</a></li>
		<li class="selected"><a href="#">Style</a></li>
		<li><a href="#">Insert</a></li>
		<li><a href="#">Revise</a></li>
		<li><a href="#">Collaborate</a></li>
	</ul>
	<div id="tabContents">
		<ul id="tabFile">
			<li>Save</li>
			<li>Cut</li>
			<li>Copy</li>
			<li>Paste</li>
		</ul>
		<ul id="tabStyle" class="selected">
			<li><button onclick="menu.style('bold')" title="bold" style="font-weight:bold">B</button></li>
			<li><button onclick="menu.style('italic')" title="italic" style="font-style:italic">I</button></li>
			<li><button onclick="menu.style('underline')" title="underline" style="text-decoration:underline">U</button></li>
			<li><button onclick="menu.style('fontName', 'Arial')" title="font" style="font-family:Comica Sans, Arial">F</button></li>
			<li><button onclick="menu.style('fontSize', 5)" title="font size" style="font-size:x-small">TT</button></li>
			<li><button onclick="menu.style('foreColor', 'red')" title="font color" style="color:red">F</button></li>
			<li><button onclick="menu.style('hiliteColor', 'red')" title="highlight" style="background-color:yellow">H</button></li>
			<li><button onclick="menu.style('justifyLeft')" title="align left">&laquo;</button></li>
			<li><button onclick="menu.style('justifyRight')" title="align right">&raquo;</button></li>
			<li><button onclick="menu.style('justifyCenter')" title="justify">&laquo;&raquo;</button></li>
			<li><button onclick="" title="border" style="border:1px solid red">B</button></li>
			<li><button onclick="menu.style('backColor', 'yellow')" title="background" style="background-color:yellow">B</button></li>
		</ul>
		<ul id="tabInsert">
			<li>Image</li>
			<li>Hyperlink</li>
			<li>Table</li>
			<li>Function</li>
		</ul>
		<ul id="tabRevise">
			<li>Revise</li>
		</ul>
		<ul id="tabCollaborate">
			<li>Collaborate</li>
		</ul>
	</div>
</div>

<table id="testTable" onmousedown="mDown(event)">
    <caption>Joe Blogs Sales (2006)</caption>
    <thead>
	<tr>
	    <th>Country</th>
	    <th id="testColHeader">Q1</th>
	    <th id="testColHeader2">Q2</th>
	    <th>Q3</th>
	    <th>Q4</th>
	</tr>
    </thead>
    <tbody>
	<tr>
	    <th>USA</th>
	    <td id="testCell1">100</td>
	    <td>80</td>
	    <td>110</td>
	    <td>150</td>
	</tr>
	<tr>
	    <th>UK</th>
	    <td id="testCell3">50</td>
	    <td>70</td>
	    <td id="testCell2">120</td>
	    <td>130</td>
	</tr>
	<tr>
	    <th>France</th>
	    <td>60</td>
	    <td>80</td>
	    <td>90</td>
	    <td>90</td>
	</tr>
  </tbody>
</table>

<div id="colOptions" class="tableOptions">
	<h3>Heading</h3>
	<div id="colOptionsSort">
		<h4>Sort:</h4>
	  	<span class="divOption">
			<input type="radio" name="sort" id="sort_ascending" value="asc"/>
			<label for="sort_ascending">ascending</label>
	  	</span>
	  	<span class="divOption">
			<input type="radio" name="sort" id="sort_descending" value="desc"/>
			<label for="sort_descending">descending</label>
	  	</span>
    </div>
    <div id="colOptionsFilter">
    	<h4>Filter:</h4>
    	<a href="javascript:colOptions.chkAllNone(true)">all</a> <a href="javascript:colOptions.chkAllNone(false)">none</a>
    </div>
	<div id="colOptionsHide">
		<h4>Hide:</h4>
		<span class="divOption">
			<input type="checkbox" id="chkHide" name="fake" value="hide">
			<label for="chkHide">Hide column</label>
	  	</span>
	</div>
	<div id="colOptionsAddCol">
	    <h4>Add Column:</h4>
	  	<span class="divOption">
			<input type="checkbox" name="addCol" id="addColLeft" value="false"/>
			<label for="sort_ascending">to the left</label>
	  	</span>
	  	<span class="divOption">
			<input type="checkbox" name="addCol" id="addColRight" value="true"/>
			<label for="sort_descending">to the right</label>
	  	</span>
	</div>
	<div id="colOptionsDelete">
		<h4>Delete:</h4>
		<span class="divOption">
			<input type="checkbox" id="chkDelete" name="fake" value="false">
			<label for="chkDelete">Delete column</label>
	  	</span>
	</div>
	<div id="colOptionsOKCancel">
	  	<input type="button" id="ColOptionsOK" value="OK" onclick="colOptions.submit()"/>
	  	<input type="button" id="ColOptionsCancel" value="Cancel" onclick="colOptions.close()">
    </div>
</div>
<div id="tableTransform" class="tableOptions">
	<h3>Table Transform</h3>
	<div id="tableTransformUnhide">
		<h4>Unhide:</h4>
	  	<span class="divOption">
			<input type="checkbox" id="unhide_test" disabled>
			<label for="unhide_test">No columns hidden</label>
	  	</span>
    </div>
    <div id="tableTransformDisplayAs">
    	<h4>Display as:</h4>
		<span class="divOption">
			<input type="radio" name="display_as" id="display_as_table" value="table" checked=""/>
			<label for="display_as_table">Table</label>
		</span>
		<span class="divOption">
			<input type="radio" name="display_as" id="display_as_barchart" value="bar chart"/>
			<label for="display_as_barchart">Bar Chart</label>
		</span>
	</div>
	<div id="tableTransformPivot">
		<h4>Pivot:</h4>
	</div>
	<div id="tableTransformOKCancel">
	  	<input type="button" id="TableOptionsOK" value="OK" onclick="tableTransform.submit()"/>
	  	<input type="button" id="TableOptionsCancel" value="Cancel" onclick="tableTransform.close()">
    </div>
</div>
<p>
<ol id="tests"></ol>
<div id="main"></div>

<script src="jTable.js" type="text/javascript"></script>
</body>
</html>